<template>
    <div >
      <a-row type="flex" justify="space-around" align="middle">
        <a-col :span="16"><H1 class="height-100">dd商城</H1></a-col>
      </a-row>

      <a-row type="flex" justify="space-around" align="middle">
        <a-col :span="16" >
          <div class="card-container">
            <a-tabs type="line">

              <a-tab-pane tab="账号登录" key="1">

                <a-form-model ref="loginForm" :model="loginForm" :rules="formRules" :layout="loginForm.layout" >
                  <a-form-model-item  label="帐号" prop="username" >
                    <a-input v-model="loginForm.username"   placeholder="帐号\手机号"  />
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                  </a-form-model-item>

                  <a-form-model-item label="密码"  prop="pass"
                                     :extra="loginForm.passExtra"
                                     :validateStatus="loginForm.passValidateStatus">
                    <a-input v-model="loginForm.pass" type="password"
                             :placeholder="loginForm.passPlaceHolder" @change="changeValue" />
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                  </a-form-model-item>
                </a-form-model>

                <a-form-model-item>
                  <a-button type="primary" shape="round" block @click="submitLogin"  size="large" >登 录</a-button>
                </a-form-model-item>

                <a-form-model-item>
                  <a-button type="danger" shape="round" block @click="resetLogin"   size="large" >重 置</a-button>
                </a-form-model-item>

              </a-tab-pane>

              <a-tab-pane tab="扫码登录" key="2">
                <p>Content of Tab Pane 2</p>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-col>
      </a-row>

    </div>
</template>

<script>
    import auth from 'static/utils/auth'
    export default {
      name: 'login',
      data(){
        return {
          loginForm:{
            layout:'horizontal',
            username:'',
            pass:'',
            passPlaceHolder:'密码',
            passExtra:'',
            passValidateStatus:'',
          },
          formRules:{
            username:[
              { required: true, message: '请输入账号', trigger: 'blur' },
              { min: 3, max: 8,  message: '账号3-8位', trigger: 'blur' },
            ],
            pass:[
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 4, max: 15,  message: '密码为4-15位', trigger: 'blur' },
            ],
          }
        }
      },
      methods:{
        submitLogin(){
          alert("123")
          this.$refs.loginForm.validate(valid => {

            if (valid) {
              this.$store.dispatch("Login",this.loginForm).then(data => {
                if (data.code != '2000'){
                  this.loginForm.passExtra=data.message;
                  this.loginForm.passValidateStatus='error';

                }else{
                  this.$router.push({path: '/home'})
                }
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });

        },
        resetLogin(){
          this.$refs.loginForm.resetFields();
        },
        changeValue(){
          this.loginForm.passExtra='';
          this.loginForm.passValidateStatus='';
        }
      },
    };
</script>

<style>
  .ant-col h1{
    margin-top: 60px;
    text-align: center;
    color: green;
    font-size: xx-large;
  }






</style>

